import { Component, Vue } from 'vue-property-decorator'
import Nav, { paths } from '@/components/Nav'
import { GET_ALL_ROLE } from '@/store/role/CONST'
import { getRoutes } from '@/api/routes'
import { roleObj } from '@/components/roles/Roles.vue'

@Component({ components: { Nav } })
export default class Rights extends Vue {
  public tableData:Array<object> =[]
  private scope: any

  created () {
    this.getAllRole()
  }

  async getAllRole () {
    const { data } = await await getRoutes()
    this.tableData = data
  }

  handleArr (role:Array<roleObj>, layer = 1) {
    role.forEach((item:any) => {
      this.tableData.push({ path: item.path, name: item.authName, role: layer })
      if (item.children.length >= 1) this.handleArr(item.children, layer + 1)
    })
  }

  render () {
    return (
      <div>
        <el-breadcrumb separator="/">
          {this.paths?.map((item, index) => (
            <el-breadcrumb-item key={index} to={{ path: item.path }}>{item.pName}</el-breadcrumb-item>
          ))}
        </el-breadcrumb>
        <br />
        <el-card class="box-card">
           <el-table
             data={this.tableData}
            border
            style="width: 100%">
             <el-table-column
               type="index"
               width="50">
             </el-table-column>
            <el-table-column
              prop="name"
              label="权限名称"
              width="180">
            </el-table-column>
            <el-table-column
              prop="path"
              label="路径"
              width="180">
            </el-table-column>
            <el-table-column
              prop="role"
              label="权限等级">

            </el-table-column>
           </el-table>
        </el-card>
      </div>
    )
  }

  public paths: paths = [
    {
      path: '/index',
      pName: '首页'
    },
    {
      path: '/index/rights',
      pName: '权限管理'
    },
    {
      path: '/index/rights',
      pName: '权限列表'
    }
  ]
}
